<template>
  <div class="home2">
    <h1>Home2_mapState映射</h1>
    <!--1. 在模板中使用多个状态-->
    <h2>name: {{ $store.state.name }}</h2>
    
    
    <h2>level: {{ $store.state.level }}</h2>
    <h2>avatarURL: {{ $store.state.avatarURL }}</h2>
    <h2>avatarURLOption: {{ avatarURLOption}}</h2>
    <!--2. 计算属性(映射状态[数组方式])-->
    <h2>映射状态</h2>
    <!-- <h2>name: {{ name }}</h2>
    <h2>level: {{ level }}</h2> -->
    <!-- <h2>cName: {{ cName }}</h2>
    <h2>cLevel: {{ cLevel }}</h2> -->
    <h2>Name: {{ name }}</h2>
    <h2>Level: {{ level }}</h2>
    <h2>nickAvatarURL: {{ nickAvatarURL }}</h2>
    <!--2. 计算属性(映射状态[对象方式])-->
    <!-- <h2>name: {{ nameObject }}</h2>
    <h2>level: {{ levelObject }}</h2> -->
  </div>
</template>

<!--optionAPI方式-->
<!-- <script>
  import { mapState } from "vuex";

  export default {
    data() {
      return {
        // name: "why",
      }
    },
    computed: {
      // 同样需要写3遍
      nameOption() {
        return this.$store.state.name
      },
      levelOption() {
        return this.$store.state.level
      },
      avatarURLOption() {
        return this.$store.state.avatarURL
      },
      ...mapState(["name", "level", "avatarURL"]),
      ...mapState({
        nameObject: state => state.name,
        levelObject: state => state.level,
        avartarURLObject: state => state.avatarURL
      })
    }
  }
</script> -->

<!--setup方式-->
<script setup>
  import { useStore,mapState } from 'vuex'
  import { toRefs } from 'vue'
  import { computed } from "vue";
  import useState from "../hooks/useState.js";

  const store = useStore()

  // 1. 一步步完成
  // const fns = mapState(["name", "level", "avatarURL"]) // 辅助函数返回的是一个包含计算属性的对象，其中每个属性都是一个函数
  // console.log(fns)
  // const {name, level, avatarURL} = fns // 解构后的 name、level、avatarURL 仍然是函数。这些函数在被调用时会返回对应的 Vuex state 值
  // const cName = computed(name.bind({$store: store}))
  // const cLevel = computed(level.bind({$store: store}))
  // const cAvatarURL = computed(() => avatarURL())
  // 2. 封装成一个函数
  // const { name, level} = useState(["name", "level"])
  // 3.  直接对store.state进行解构(推荐)
  // const { name, level } = store.state // 不是响应式的
  const { name, level, avatarURL: nickAvatarURL } = toRefs(store.state) // 响应式的
</script>

<style scoped>
</style>